<template>
    <div class="table" v-loading.fullscreen.lock="loading">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 用户管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户账单</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="handle-box">

            <el-input v-model="select_word" placeholder="手机号/用户/备注" class="handle-input mr10"></el-input>
            <el-date-picker
                    v-model="date_range"
                    type="datetimerange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    @change="setTime"
                    :picker-options="dateOptions">
            </el-date-picker>
            <el-button type="primary" icon="search" @click="search">搜索</el-button>
        </div>
        <el-table :data="data"   ref="multipleTable" stripe>
            <el-table-column prop="user.name" label="姓名" width="100">
            </el-table-column>
            <el-table-column prop="user.remark" label="备注" width="150">
            </el-table-column>
            <el-table-column prop="user.mobile" label="手机号" width="150">
            </el-table-column>
            <el-table-column prop="type" label="类型" width="100" :formatter="type_format">
            </el-table-column>
            <el-table-column prop="amount" label="余额" width="100" :formatter="number_format">
            </el-table-column>
            <el-table-column prop="note" label="详情" width="150" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="created_at" label="时间"  fixed="right" width="250">
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    @current-change ="handleCurrentChange"
                    layout="prev, pager, next"
                    :total="total"
                    >
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import ElDialog from "../../../node_modules/element-ui/packages/dialog/src/component.vue";
    import ElInput from "../../../node_modules/element-ui/packages/input/src/input.vue";
    import ElInputNumber from "../../../node_modules/element-ui/packages/input-number/src/input-number.vue";
    export default {
        data() {
            return {
                date_range:'',
                timeFormat:'',
                dateOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                typeList:[
                    '全部',
                    '充值',
                    '消费'
                ],
                url: this.$baseUrl+'/userAccount',
                tableData: [],
                cur_page: 1,
                multipleSelection: [],
                select_cate: '',
                select_word: '',
                del_list: [],
                is_search: false,
                total:1,
                loading:false,
                chargeDialog:false,
                chargeData:{
                    amount:1,
                    id:'',
                    note:'',
                    act:'charge'
                },
                costDialog:false,
                costData:{
                    amount:1,
                    id:'',
                    note:'',
                    money:0,
                    act:'cost'
                },
                editDialog:false,
                editData:{
                    mobile:1,
                    id:'',
                    remark:'',
                    name:0,
                    act:'update'
                },
            }
        },
        created(){
            this.getData();

        },
        computed: {
            data(){
                const self = this;
                return self.tableData.filter(function(d){
                    return d;
                })
            }
        },
        methods: {
            number_format(row,column){
                return '￥'+row.amount;
            },
            type_format(row,column){
                return this.typeList[row.type];
            },
            setTime(val){
                console.log(val);
                this.timeFormat = val;
            },
            handleCurrentChange(val){
                this.cur_page = val;
                this.getData();
            },
            getData(){
                let self = this;
                self.loading_start();
                self.$axios.get(self.url+'?page='+self.cur_page+'&keywords='+self.select_word+'&timeRange='+self.timeFormat).then((res) => {
                    self.loading_end();
                    self.total = res.data.data.total;//总记录数
                    self.tableData = res.data.data.data;//数据
                })
            },
            search(){
                this.getData();
            },
            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            loading_start(){
                this.loading=true;
            },
            loading_end(){
                this.loading=false;
            }
        },
        components:{
            ElInputNumber,
            ElInput,
            ElDialog
        }
    }
</script>

<style scoped>
    .handle-box{
        margin-bottom: 20px;
    }
    .handle-select{
        width: 120px;
    }
    .handle-input{
        width: 300px;
        display: inline-block;
    }
</style>